<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>会员详情</title>
		<link rel="stylesheet" href="https://www.layuicdn.com/layui-v2.5.6/css/layui.css" media="all">
		<style>
			.orderList-container {
				padding: 20px;
			}
			
			td[data-field="imgUrl"] div,
			td[data-field="negativeImgUrl"] div {
				height: 120px;
			}
			
			.lay-form {
				padding: 20px;
			}
			
			.orderList-container {
				background-color: #fff;
			}
			
			.bar {
				display: flex;
				justify-content: flex-start;
				align-items: flex-end;
			}
			
			.searchInput {
				display: flex;
				align-items: flex-end;
			}
			
			.searchInput label {
				font-size: 12px;
			}
			
			.searchInput input {
				width: 200px;
			}
			
			.searchInput .layui-form-label {
				padding: 9px 0;
			}
			
			.bar .layui-form-label {
				padding: 0;
				padding-bottom: 4px;
				text-align: left;
			}
			
			.bar .layui-inline {
				margin-right: 20px;
			}
			
			.layui-table img {
				max-width: 200px;
				object-fit: contain;
			}
			
			.layui-table-cell {
				height: auto;
			}
			
			.layer-container {
				padding: 20px;
			}
			
			.layer-container ul {
				display: flex;
			}
			
			.layer-container ul li {
				border: 1px solid #efefef;
				flex: 1;
				padding: 30px;
				text-align: center;
			}
			
			.layer-container ul li p {
				line-height: 30px;
				color: #666;
			}
			
			.layer-container ul .flag {
				flex: 0 0 300px;
			}
			
			.goBack {
				cursor: pointer;
			}
		</style>
	</head>

	<body>

		<div class="fxOrderList-container">
			<div style="display: flex;align-items: center;font-size: 17px;padding: 15px 38px;"><i class="layui-icon layui-icon-left goBack" style="font-size: 30px; color: #333;"></i><span class="goBack">返回列表</span></div>

		</div>

		<div class="searchInput">
			<form class="layui-form" action="" lay-filter="resets">
				<div class="layui-inline">
					<label class="layui-form-label">昵称：</label>
					<input class="layui-input" name="userName" placeholder="请输入微信昵称" autocomplete="off">
				</div>
				<div class="layui-inline">
					<label class="layui-form-label">手机号：</label>
					<input type="text" class="layui-input" id="test1" name="userPhone" placeholder="请输入手机号" autocomplete="off">
				</div>

				<!-- 筛选 -->
				<div class="layui-inline" id="status">
					<label class="layui-form-label" style="padding-left:10px; text-align:center; padding-right:0 ; width: 60px;">会员类型：</label>
					<div class="layui-input-block" style="margin-left: 80px;">
						<select name="level">
							<option value="">全部</option>
							<option value="0">非会员</option>
							<option value="1">VIP会员</option>
							<option value="2">分销会员</option>
						</select>
					</div>
				</div>

				<div class="layui-inline">
					<label class="layui-form-label">注册时间：</label>
					<input class="layui-input" name="createTime" id="test5" placeholder="注册日期" autocomplete="off">
				</div>

				<button class="layui-btn" data-type="reload" lay-submit="" lay-filter="searchForm">搜索</button>
				<button class="layui-btn layui-btn-primary" data-type="reload" lay-submit="" lay-filter="reset">重置</button>
			</form>
		</div>

		<div id="help" style="display:none;padding: 10px;">
			<table class="layui-table">
				<colgroup>
					<col width="150">
					<col width="200">
					<col>
				</colgroup>
				<thead>
					<tr>
						<th>序号</th>
						<th>订单编号</th>
						<th>昵称</th>
						<th>互助金额(元)</th>
					</tr>
				</thead>
				<tbody class="helpDetail">
				</tbody>
			</table>
		</div>

		<div id="fxOrder" style="display:none;padding: 10px;">
			<table class="layui-table">
				<colgroup>
					<col width="150">
					<col width="200">
					<col>
				</colgroup>
				<thead>
					<tr>
						<th>订单编号</th>
						<th>分销名称</th>
						<th>购买时间</th>
					</tr>
				</thead>
				<tbody class="fxDetail">
				</tbody>
			</table>
		</div>

		<table lay-filter="orderListTable" class="layui-hide" id="orderListTable"></table>
	</body>

	<!-- 操作 -->
	<script type="text/html" id="viewFx">
		<a class="layui-btn layui-btn-xs" lay-event="fx">查看分销订单</a>
	</script>

	<script src="https://cdn.bootcdn.net/ajax/libs/layui/2.5.7/layui.all.min.js"></script>
	<script src="../utils.js"></script>
	<script>
		function GetQueryString(arg) {
			var reg = new RegExp("(^|&)" + arg + "=([^&]*)(&|$)");
			var r = window.location.search.substr(1).match(reg);
			console.log(r)
			if(r != null) {
				return decodeURI(r[2]);
			}
			return null;
		};
		var userId = GetQueryString('id');
		console.log(userId)
		var shareLevel = GetQueryString('shareLevel');
		console.log(shareLevel)
		layui.use(['table', 'form', 'jquery', "laydate"], function() {
			var table = layui.table,
				form = layui.form,
				laydate = layui.laydate,
				$ = layui.jquery;

			table.render({
				elem: '#orderListTable',
				toolbar: "#barDemo",
				url: window.baseUrl + '/distribution/getShareRelationForPc?userId='+userId+'&shareLevel='+shareLevel,
				headers: {
					Authorization: localStorage.token
				},
				method: 'GET',
				//contentType: 'application/json',
				response: {
					statusCode: 200 //规定成功的状态码，默认：0
				},
				cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
					,
				parseData: function(res) { //res 即为原始返回的数据
					return {
						"code": 200,
						"count": res.data.recordsTotal, //解析数据长度
						"data": res.data.data //解析数据列表
					};
				},
				request: {
					pageName: 'start', //页码的参数名称，默认：page
					limitName: 'length' //每页数据量的参数名，默认：limit

				},
				cols: [
					[{
							type: 'numbers'
						},
						{
							type: 'checkbox'
						}, {
							field: 'userName', title: '昵称'
						}

						, {
							title: '头像', width: 120,
							templet: function(res) {
								return res.userPhoto ? "<img class='viewImg' style='width:80px; height:80px;' src='" + res.userPhoto + "'/>" : "-"
							}
						}, {
							field: 'userPhone', title: '手机号',
							templet: function(res) {
								return res.userPhone || "-"
							}
						}

						, {
							field: 'level',
							title: '会员类型',
							templet: function(res) {
								return res.level == 0 ? "非会员" : res.level == 1 ? "VIP会员" : res.level == 2 ? "分销会员" : res.level == 3 ? "分销会员" : res.level ? "分销会员" : '-';
							}
						}

						, {
							field: 'shareUserName',
							title: '推荐人',
							templet: function(res) {
								return res.shareUserName || "-"
							}
						}

						, {
							field: 'distributionOrderNum',
							title: '购买分销数',
						}, {
							field: 'createTime',
							title: '最新购买时间',
						}, {
							title: '操作',
							toolbar: '#viewFx'
						}
					]
				],
				page: true,
				done: function() {
					// 放大图片
					$(".viewImg").on("click", function() {
						let url = $(this).attr("src");
						layer.open({
							type: 1,
							title: false,
							closeBtn: 0,
							area: ['auto'],
							skin: 'layui-layer-nobg', //没有背景色
							shadeClose: true,
							content: "<img src=" + url + " />"
						});
					})

					laydate.render({
						elem: '#test5',
						range: true
					});
				}
			});

			table.on('tool(orderListTable)', function(obj) {
				var data = obj.data; //获得当前行数据
				var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
				var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）

				if(layEvent === 'fx') { //查看
					layer.open({
						type: 1,
						title: '分销订单',
						area: ['600px', '450px'],
						shadeClose: false,
						skin: 'yourclass',
						content: $("#fxOrder")
					});
					var html = '';
					$(".fxDetail").html('');

					data.orderList.map((item) => {
						html += '<tr><td>' + item.orderNo + '</td><td>' + (item.distributionName || '-') + '</td><td>' + item.createTime + '</td></tr>'
					})

					$(".fxDetail").html(html);
				}
			});

			// 搜索
			form.on("submit(searchForm)", function(e) {
				if(e.field.createTime) {
					var a = e.field.createTime.split(" - ");
					e.field.userCreateTimeStart = new Date(a[0]);
					e.field.userCreateTimeEnd = new Date(a[1]);
				}
				e.field.createTime = '';
				for(let key in e.field) {
					if(!e.field[key]) {
						delete e.field[key]
					}
				}

				table.reload('orderListTable', {
					page: {
						start: 0 //重新从第 1 页开始
					},
					where: e.field
				});

				return false;
			})

			// 搜索
			form.on("submit(reset)", function(e) {

				table.reload('orderListTable', {
					page: {
						start: 1 //重新从第 1 页开始
					},
					where:null,
				});

				form.val("resets", {
					name: "",
					userPhone: "",
					level:"",
					createTime: ""
				});

				return false;
			})


			// 编辑和删除
			table.on("toolbar(orderListTable)", function(data) {
				switch(data.event) {
					case "lookDetails":
						layerOpen();
						break;
				}
			})

			$(".goBack").on('click', function() {
				window.history.go(-1);
			})
		});
	</script>

</html>